<template>
    <div class="personal">
        <header-a/>

        <div class="p1">

            <div class="p11 mar-center">
                <div class="p12 container-align">
                    <div class="p13">
                        <img v-if="$root.userInfo" :src="$root.userInfo.wxHead" alt=""/>
                    </div>
                    <div class="p14">
                        <div class="p15 container-align">
                            <div class="p17" v-if="$root.userInfo">{{ $root.userInfo.wxName }}</div>
                            <div class="p18 text-center" v-if="$root.userInfo">{{ $root.userInfo.phone ? '认证' : '未认证' }}</div>
                        </div>
                        <div class="p16 container-align">
                            <div class="p19 text-center" v-if="$root.userInfo">积分{{$root.userInfo.integral}}</div>
                            <div class="p20 text-center" @click="toCharge">充值</div>
                        </div>
                    </div>
                </div>

                <div class="p31">

                    <div class="p32">基础信息</div>

                    <div class="p33 container-align">
                        <div class="p34">姓名：</div>
                        <label v-if="mode">
                            <input class="p35" type="text" placeholder="请输入姓名" v-model="name"/>
                        </label>
                        <label v-else>
                            <input class="p36" readonly type="text" v-model="name"/>
                        </label>
                    </div>
                    <div class="p33 container-align">
                        <div class="p34">手机号码：</div>
                        <label v-if="mode">
                            <input class="p35" type="text" placeholder="请输入手机号码" v-model="phone"/>
                        </label>
                        <label v-else>
                            <input class="p36" type="text" readonly v-model="phone"/>
                        </label>
                    </div>
                    <div class="p33 container-align">
                        <div class="p34">身份证号码：</div>
                        <label v-if="mode">
                            <input class="p35" type="text" placeholder="请输入身份证号码" v-model="ID"/>
                        </label>
                        <label v-else>
                            <input class="p36" readonly type="text" v-model="ID"/>
                        </label>
                    </div>

                    <div class="p38" v-if="mode">
                        <div class="p37 text-center" @click="updateInfo">提交</div>
                    </div>
                    <div class="p38" v-else>
                        <div class="p37 text-center" @click="loginOut">退出</div>
                    </div>

                </div>

            </div>

        </div>

        <Bottom/>
    </div>
</template>

<script>
import HeaderA from "@/components/child/Header";
import Bottom from "@/components/Bottom";

export default {
    name: "Personal",
    data () {
        return {
            name: '',
            phone: '',
            ID: '',
            mode: true
        }
    },
    components: { HeaderA, Bottom },
    mounted () {
        // console.log(this.$root.wxId);
        if (this.$root.userInfo) {
            this.ID = this.$root.userInfo.idCard;
            this.name = this.$root.userInfo.realName;
            this.phone = this.$root.userInfo.phone;
        }
        if (this.phone) {
            this.mode = false
        }
    },
    methods: {
        toCharge () {
            this.$router.push('/charge')
        },
        loginOut() {
            localStorage.setItem('wxId', '');
            this.$root.userInfo = null;
            this.$root.wxId = null;
            this.$router.replace('/index');
        },
        async updateInfo () {
            if (!this.name) {
                alert('请填写姓名！');
                return
            }
            if (!this.phone) {
                alert('请填写手机号！');
                return
            }
            if(!(/^1[3456789]\d{9}$/.test(this.phone))){
                alert("手机号码有误，请重填");
                return false;
            }
            if (!this.ID) {
                alert('请填写身份证！');
                return
            }
            let res = await this.$http.post('updateInfo', {
                "wxId": this.$root.wxId,
                "name": this.name,  // 姓名
                "phone": this.phone, // 手机号
                "idCard": this.ID // 身份证号
            });
            alert(res.data.message);
            this.mode = false;
            console.log(res);
        }
    }

}
</script>

<style scoped lang="scss">
.personal {
    .p1 {
        padding-top: 45px;
        padding-bottom: 172px;
        background-color: #F8FBFA;
        .p11{
            width: 1070px;
            height: 866px;
            background-color: #FFFFFF;
        }
        .p31{
            padding-top: 53px;
            padding-left: 104px;
            .p38 {
                padding-left: 134px;
                padding-top: 50px;
                display: flex;
                justify-items: center;
                align-items: center;
                .p37 {
                    width: 172px;
                    height: 44px;
                    background-color: #26C6AB;
                    font-size: 16px;
                    font-weight: 300;
                    line-height: 44px;
                    color: #FFFFFF;
                    cursor: pointer;
                }
            }
            .p32{
                font-size: 20px;
                font-weight: 300;
                line-height: 28px;
                color: #000000;
                margin-bottom: 43px;
            }
            .p33{
                margin-bottom: 43px;
                .p34{
                    width: 134px;
                    font-size: 16px;
                    font-weight: 300;
                    line-height: 22px;
                    color: #000000;
                }
                .p35{
                    width: 180px;
                    height: 44px;
                    line-height: 44px;
                    background-color: #FFFFFF;
                    border: 1px solid #707070;
                    padding-left: 12px;
                }
                .p36{
                    border: none;
                    outline: none;
                    width: 180px;
                    height: 44px;
                    line-height: 44px;
                    padding-left: 12px;
                }
            }
        }
        .p12{
            height: 207px;
            background-color: rgba(38, 198, 171, 0.2);
            padding-left: 104px;
            .p14{
                .p16{
                    .p19{
                        padding-left: 15px;
                        padding-right: 15px;
                        height: 34px;
                        line-height: 34px;
                        background-color: #FFFFFF;
                        font-size: 16px;
                        color: rgba(0, 0, 0, 0.8);
                    }
                    .p20{
                        width: 39px;
                        height: 34px;
                        line-height: 34px;
                        background-color: #26C6AB;
                        border-radius: 3px;
                        color: #FFFFFF;
                        cursor: pointer;
                    }
                }
                .p15{
                    margin-bottom: 32px;
                    .p17{
                        height: 28px;
                        line-height: 28px;
                        color: #000000;
                        margin-right: 18px;
                    }
                    .p18{
                        width: 57px;
                        height: 29px;
                        line-height: 29px;
                        background-color: #26C6AB;
                        border-radius: 3px;
                        color: #FFFFFF;
                    }
                }
            }
            .p13{
                width: 94px;
                height: 94px;
                background-color: #26C6AB;
                border-radius: 50%;
                margin-right: 26px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

    }
}
</style>